<template>
  <TextInput
    v-if="formItem && formItem.formType === 'TextInput'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <TextAreaInput
    v-if="formItem && formItem.formType === 'TextAreaInput'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <NumberInput
    v-if="formItem && formItem.formType === 'NumberInput'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <SingleSelect
    v-if="formItem && formItem.formType === 'SingleSelect'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <MultipleSelect
    v-if="formItem && formItem.formType === 'MultipleSelect'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <DateSelect
    v-if="formItem && formItem.formType === 'DateSelect'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <DateRangeSelect
    v-if="formItem && formItem.formType === 'DateRangeSelect'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <ImageUpload
    v-if="formItem && formItem.formType === 'ImageUpload'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <FileUpload
    v-if="formItem && formItem.formType === 'FileUpload'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <UserSelect
    v-if="formItem && formItem.formType === 'UserSelect'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <RemarkText
    v-if="formItem && formItem.formType === 'RemarkText'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <LinkText
    v-if="formItem && formItem.formType === 'LinkText'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <div v-if="formItem && formItem.formType === 'Initiator'" class="v-form-item-wrapper">
    <span class="text" :class="type">{{ createUser || '${发起人}' }}</span>
  </div>
  <div v-if="formItem && formItem.formType === 'InitiatorDept'" class="v-form-item-wrapper">
    <span class="text" :class="type">{{ createDept || '${发起部门}' }}</span>
  </div>
  <div v-if="formItem && formItem.formType === 'InitiatorTime'" class="v-form-item-wrapper">
    <span class="text" :class="type"> {{ createTime || '${发起时间}' }}</span>
  </div>
  <InnerTable
    v-if="formItem && formItem.formType === 'InnerTable'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <CountData
    v-if="formItem && formItem.formType === 'CountData'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <FormatData
    v-if="formItem && formItem.formType === 'FormatData'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
  <ServerData
    v-if="formItem && formItem.formType === 'ServerData'"
    v-bind="formItem"
    :formValue="formValue"
    :type="type"
    @update="update"
  />
</template>

<script setup lang="ts">
import TextInput from '../tools/textInput/TextInput.vue'
import TextAreaInput from '../tools/textAreaInput/TextAreaInput.vue'
import NumberInput from '../tools/numberInput/NumberInput.vue'
import SingleSelect from '../tools/singleSelect/SingleSelect.vue'
import MultipleSelect from '../tools/multipleSelect/MultipleSelect.vue'
import DateSelect from '../tools/dateSelect/DateSelect.vue'
import DateRangeSelect from '../tools/dateRangeSelect/DateRangeSelect.vue'
import ImageUpload from '../tools/imageUpload/ImageUpload.vue'
import FileUpload from '../tools/fileUpload/FileUpload.vue'
import UserSelect from '../tools/userSelect/UserSelect.vue'
import RemarkText from '../tools/remarkText/RemarkText.vue'
import LinkText from '../tools/linkText/LinkText.vue'
import InnerTable from '../tools/innerTable/InnerTable.vue'
import CountData from '../tools/countData/CountData.vue'
import FormatData from '../tools/formatData/FormatData.vue'
import ServerData from '../tools/serverData/ServerData.vue'
const { forms, updateFormValue, getFormValue } = inject<{
  forms: any
  updateFormValue: (key: string, value: string) => void
  getFormValue: (key: string) => string
}>('forms', {
  forms: [],
  updateFormValue: () => {},
  getFormValue: () => {
    return ''
  }
})
const { createUser, createDept, createTime } = inject<{
  createUser: string
  createDept: string
  createTime: string
}>('initiator', {
  createUser: '',
  createDept: '',
  createTime: ''
})
const props = defineProps<{
  tdId: string | number
  type: string // config-table config-mobile table mobile print
}>()
const formItem = computed(() => {
  return forms.value.find((form: any) => form.tdId === props.tdId)
})
const formValue = computed(() => {
  if (props.type === 'config-table' || props.type === 'config-mobile') {
    return ''
  } else {
    return getFormValue(formItem.value.config.key)
  }
})
const update = (value: string) => {
  updateFormValue(formItem.value.config.key, value)
}
</script>

<style lang="scss">
.v-form-item-wrapper {
  padding: 10px;
  width: 100%;
  .form-item {
    display: flex;
    align-items: center;
    .prefix,
    .suffix {
      color: #333333;
      flex-shrink: 0;
      margin: 5px;
    }
    .required {
      line-height: 1;
      margin-left: 5px;
      color: red;
    }
  }
  pre {
    font-family: inherit;
    color: #999999;
    margin: 5px 5px 0;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    line-height: 20px;
    i {
      margin-right: 5px;
    }
  }
}
</style>
